import React from 'react';
import 'antd/dist/antd.css';
import './index.less'

const CssName = () => {

    return (
        <div>
            <h1>BEM写法</h1>
            <ul>
                <li>
                    <h1>状态</h1>
                    <p></p>
                    <p> 前一个 prev</p>
                    <p> 后一个 next</p>
                    <p> 当前的 current</p>
                    <p></p>
                    <p> 显示的 show</p>
                    <p> 隐藏的 hide</p>
                    <p> 打开的 open</p>
                    <p> 关闭的 close</p>
                    <p></p>
                    <p> 选中的 selected</p>
                    <p> 有效的 active</p>
                    <p> 默认的 default</p>
                    <p> 反转的 toggle</p>
                    <p></p>
                    <p> 禁用的 disabled</p>
                    <p> 危险的 danger</p>
                    <p> 主要的 primary</p>
                    <p> 成功的 success</p>
                    <p> 提醒的 info</p>
                    <p> 警告的 warning</p>
                    <p> 出错的 error</p>
                    <p></p>
                    <p> 大型的 lg</p>
                    <p> 小型的 sm</p>
                    <p> 超小的 xs</p>
                    <p></p>
                </li>
                <li>
                    <h1>布局</h1>
                    <p>文档 doc</p>
                    <p>头部 header(hd)</p>
                    <p>主体 body</p>
                    <p>尾部 footer(ft)</p>
                    <p>主栏 main</p>
                    <p>侧栏 side</p>
                    <p>容器 box/container</p>
                </li>
                <li>
                    <h1>通用部件</h1>
                    <p>列表 list</p>
                    <p>列表项 item</p>
                    <p>表格 table</p>
                    <p>表单 form</p>
                    <p>链接 link</p>
                    <p>标题 caption/heading/title</p>
                    <p>菜单 menu</p>
                    <p>集合 group</p>
                    <p>条 bar</p>
                    <p>内容 content</p>
                    <p>结果 result</p>


                </li>
                <li><h1>组件</h1>
                    <p>按钮 button(btn)</p>
                    <p>字体 icon</p>
                    <p>下拉菜单 dropdown</p>
                    <p>工具栏 toolbar</p>
                    <p>分页 page</p>
                    <p>缩略图 thumbnail</p>
                    <p>警告框 alert</p>
                    <p>进度条 progress</p>
                    <p>导航条 navbar</p>
                    <p>导航 nav</p>
                    <p>子导航 subnav</p>
                    <p>面包屑 breadcrumb(crumb)</p>
                    <p>标签 label</p>
                    <p>徽章 badge</p>
                    <p>巨幕 jumbotron</p>
                    <p>面板 panel</p>
                    <p>洼地 well</p>
                    <p>标签页 tab</p>
                    <p>提示框 tooltip</p>
                    <p>弹出框 popover</p>
                    <p>轮播图 carousel</p>
                    <p>手风琴 collapse</p>
                    <p>定位浮标 affix</p>


                </li>
                <li><h1>语义化小部件</h1>
                    <p>品牌 brand</p>
                    <p>标志 logo</p>
                    <p>额外部件 addon</p>
                    <p>版权 copyright</p>
                    <p>注册 regist(reg)</p>
                    <p>登录 login</p>
                    <p>搜索 search</p>
                    <p>热点 hot</p>
                    <p>帮助 help</p>
                    <p>信息 info</p>
                    <p>提示 tips</p>
                    <p>开关 toggle</p>
                    <p>新闻 news</p>
                    <p>广告 advertise(ad)</p>
                    <p>排行 top</p>
                    <p>下载 download</p>
                </li>
                <li><h1></h1></li>
            </ul>

        </div>)
}
export default CssName
